package net.osin.playscalajs

import com.thoughtworks.binding.Binding
import com.thoughtworks.binding.Binding.{BindingSeq, Var, Vars}
import net.osin.playscalajs.semantic.SemanticUI.jq2semantic
import net.osin.playscalajs.shared.SharedMessages
import org.lrng.binding.html
import org.querki.jquery.$
import org.querki.jquery.JQueryAjaxSettings.async
import org.scalajs.dom
import org.scalajs.dom.document
import org.scalajs.dom.html.{Button, Table, TableRow}
import org.scalajs.dom.raw.{Event, Node}

import scala.scalajs.js.annotation.JSExport
import scala.scalajs.js.Dynamic.literal

object ScalaJSExample {

  case class Contact(name: Var[String], email: Var[String])

  @html
  def bindingButton(contact: Contact): Binding[Button] = {
    <button
    onclick={ event: Event =>
      contact.name.value = "Modified Name"
    }
    >
      Modify the name
    </button>
  }

  @html
  def bindingTr(contact: Contact): Binding[TableRow] = {
    <tr>
      <td>{ contact.name.bind }</td>
      <td>{ contact.email.bind }</td>
      <td>{ bindingButton(contact).bind }</td>
    </tr>
  }

  @html
  def bindingTable(contacts: BindingSeq[Contact]): Binding[Table] = {
    <table>
      <tbody>
        {
        for (contact <- contacts) yield {
          bindingTr(contact).bind
        }
        }
      </tbody>
    </table>
  }

  def appendPar(text: String,targetNode: dom.Node=document.getElementById("bindingDemo")) = {
    val parNode = document.createElement("p")
    parNode.id = text
    targetNode.appendChild(parNode)
    text
  }

  def getCSRF = {
    val csrf = document.getElementById("bindingDemo").accessKey
    println(csrf.toString)
    csrf
  }


  def index: Unit = {
    dom.document.getElementById("scalajsShoutOut").textContent = SharedMessages.itWorks
    dom.document.getElementById("scalajsShoutOut1").textContent = "SharedMessages.itWorks"
    val data = Vars(Contact(Var("Yang Bo"), Var("yang.bo@rea-group.com")))

    html.render(dom.document.getElementById(appendPar("binding-table")), bindingTable(data))

    html.render(dom.document.getElementById(appendPar("binding-view")), TwoWayBinding.View.render)

    html.render(dom.document.getElementById(appendPar("binding-gsm")),GlobalStateManagement.View.render)

    html.render(dom.document.getElementById(appendPar("binding-smp")),MountPoint.ViewSMP.render)

    html.render(dom.document.getElementById(appendPar("binding-mmp")),MountPoint.ViewMMP.render)

    html.render(dom.document.getElementById(appendPar("binding-css")),CSS.View.render)

    html.render(dom.document.getElementById(appendPar("binding-tablecontrol")),TableControl.Component.render)

    html.render(dom.document.getElementById(appendPar("binding-semantic")),semantic.View.render)

//    $(".ui.dropdown").dropdown(literal(on="hover",clearable= true))

    html.render(dom.document.getElementById(appendPar("binding-jquery")),jquery.View.render)

    html.render(dom.document.getElementById(appendPar("binding-ajax")),ajax.View.render)

    jquery.View.mounted()
    getCSRF
  }

  def ionic = {
    dom.document.getElementById("scalajsShoutOut").textContent = "Ionic Home Page!"
  }
  def home = {
    dom.document.getElementById("scalajsShoutOut").textContent = "Home Page!"
  }
  def react = {
    dom.document.getElementById("scalajsShoutOut").textContent = "React Home Page!"

  }

  @JSExport
  def main(args: Array[String]): Unit = {
    val s = document.getElementById("bindingDemo").accessKey
    s match {
      case "index" => index
      case "ionic" => ionic
      case "react" => react
      case _ => home
    }
  }


}
